<template>
  <div class="audit-detail">
      <topTitle title="基本信息"/>
      <div class="qu-game">
          <div class="base-content">
              <div>
                  <p>趣ID：</p>
                  <p>{{ detail.userId }}</p>
              </div>
              <div>
                  <p>趣游戏昵称：</p>
                  <p>{{ detail.nickName }}</p>
              </div>
              <div>
                  <p>提交时间：</p>
                  <p>{{ formatDate(detail.createTime) }}</p>
              </div>
          </div>
          <div class="audit-operation">
              <el-button v-if="detail.auditStatus === 0" type="primary" @click="editSkin">{{ editText === 0 ? '编辑' : '保存' }}</el-button>
              <template v-if="detail.auditStatus !== 0">
                <span style="color: red;" v-if="detail.auditStatus === -1">已拒绝</span>
                <span style="color: #67C23A;" v-if="detail.auditStatus === 1">已通过</span>
              </template>
              <template v-else>
                <el-button type="primary" @click="setAuditStatus(1)">通过审核</el-button>
                <el-button type="primary" @click="setAuditStatus(-1)">拒绝</el-button>
              </template>
          </div>
      </div>
      <el-tabs class="game" type="border-card">
        <el-tab-pane label="账号详情">
          <div class="game-basic">
              <div class="head">
                <img :src="detail.gameAccountVo.imgUrl" alt="">
              </div>
              <div class="basic-detail">
                <p>QQ号：{{ detail.gameAccountVo.accountNo }}</p>
                <p>{{ detail.gameAccountVo.nickname }}</p>
              </div>
              <div v-if="detail.sumWorth" class="account-value">
                <span>账号价值：{{ detail.sumWorth }}元</span>
              </div>
          </div>
          <section class="total-box">
            <div class="content-box">
                <div class="item">{{ detail.carrier }}</div>
                <div class="item">{{ detail.gun }}</div>
                <div class="item">{{ detail.suit }}</div>
                <div class="item">
                  <span v-if="editText === 0">{{ gunSkin }}</span>
                  <el-input-number v-else v-model="gunSkin" size="small"></el-input-number>
                </div>
                <div class="item">
                  <span v-if="editText === 0">{{ clothes }}</span>
                  <el-input-number v-else v-model="clothes" size="small"></el-input-number>
                </div>
            </div>
            <div class="title-box">
                <div class="item">载具</div>
                <div class="item">特效枪</div>
                <div class="item">稀有套装</div>
                <div class="item">枪皮总数</div>
                <div class="item">套装总数</div>
            </div>
          </section>
        </el-tab-pane>
      </el-tabs>
      <div class="skinVos-main">
        <skinVos v-for="(item, index) in skinVos" :key="index" :propsData="item.data" :auditStatus="detail.auditStatus" :title="item.title" :editText="editText" @saveEdit="saveEdit"></skinVos>
      </div>
      <topTitle title="段位信息"/>
      <div class="dan">
          <div class="dan-list" v-for="(item, index) in detail.gameAccountVo.gameFunctions" :key="index">
            <h5 class="dan-title">{{ item.name }}</h5>
            <section class="total-box">
              <div class="title-box">
                <div v-for="(ranksItem, i) in item.ranks" :key="i" class="item">{{ ranksItem.rankName }}</div>
              </div>
              <div class="content-box">
                  <div v-for="(ranksItem, i) in item.ranks" :key="i" class="item">{{ ranksItem.rankLevel }}</div>
              </div>
            </section>
          </div>
      </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import skinVos from '../components/skinVos'
import gameProps from '../components/gamePorps'
export default {
    components: {
      skinVos,
      gameProps
    },
    data () {
        return {
            editText: 0, // 0 -> 编辑 1-> 保存
            detail: {},
            skinVos: [],
            auditId: '',
            dataId: '',
            clothes: '',
            gunSkin: ''
        }
    },
    mounted () {
        const { auditId, dataId } = this.$route.query
        this.auditId = auditId
        this.dataId = dataId
        this.getDetail()
    },
    methods: {
        getDetail () {
            this.$http.post('/peace/selectPropView', {
              auditId: this.auditId
            }).then(res => {
                if (res.code === '0') {
                    this.detail = res.data
                    this.gunSkin = res.data.gunSkin
                    this.clothes = res.data.clothes
                    this.skinVos = [
                        {
                            title: '载具',
                            data: res.data.respVo.carrier
                        },
                        {
                            title: '特效枪',
                            data: res.data.respVo.guns
                        },
                        {
                            title: '稀有套装',
                            data: res.data.respVo.specialSuit
                        },
                        {
                            title: '稀有单品',
                            data: res.data.respVo.specialGoods
                        },
                        {
                            title: '其他道具',
                            data: res.data.respVo.voice
                        }
                    ]
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        // 保存
        saveEdit (skinList) {
            let skinVosCheck = []
            this.skinVos.forEach(item => {
                for (let i = 0; i < item.data.length; i++) {
                    for (let j = 0; j < item.data[i].props.length; j++) {
                        if (item.data[i].props[j].hasGet) {
                            skinVosCheck.push({
                                skinId: item.data[i].props[j].propId,
                                level: item.data[i].props[j].userLevel
                            })
                        }
                    }
                }
            })
            this.$http.post('/peace/editPropView', {
                auditId: this.auditId,
                dataId: this.dataId,
                skin: skinVosCheck,
                clothes: this.clothes,
                gunSkin: this.gunSkin
            }).then(res => {
                if (res.code === '0') {
                    this.$message.success('保存成功')
                    this.$set(this.detail, 'auditStatus', 1)
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        // 操作审核状态
        setAuditStatus (operateStatus) {
            this.$http.post('/peace/operatePropAuditStatus', {
                auditId: this.auditId,
                operateStatus
            }).then(res => {
                if (res.code === '0') {
                    this.$set(this.detail, 'auditStatus', operateStatus)
                    let message = '已通过'
                    if (operateStatus === -1) {
                        message = '已拒绝'
                        return
                    }
                    this.$message.success(message)
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        formatDate (time) {
          return formatDate(time, 'YYYY-MM-DD HH:MM:SS')
        },
        editSkin () {
            if (this.editText === 1) {
              this.saveEdit()
            }
            this.editText = this.editText === 0 ? 1 : 0
        }
    }
}
</script>
<style lang="scss" scoped>
.audit-detail{
  margin: 20px 0 0;
  color: #333333;
  font-size: 14px;
  img{
    vertical-align: top;
  }
  .game-props{
    margin-top: 20px;
  }
  .base-content {
      display: flex;
      color: #333;
      font-size: 14px;
      line-height: 22px;
      div {
          margin-right: 30px;
      }
  }
  .qu-game{
    display: flex;
    justify-content: space-between;
    .account{
      line-height: 32px;
      span{
        margin-right: 20px;
      }
    }
  }
  .game{
    margin: 20px 0;
    .game-basic{
      display: flex;
      align-items: center;
    }
    .head{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
    .basic-detail{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 20px;
      line-height: 30px;
    }
    .account-value{
      margin-left: 200px;
      font-size: 18px;
      font-weight: 500;
    }
  }
  .props{
    max-width: 1000px;
    .props-title{
      margin-bottom: 20px;
    }
  }
  .dan{
      display: flex;
      padding-bottom: 100px;
      .dan-title{
        margin: 10px 0;
        font-size: 16px;
        text-align: center;
      }
      .dan-list{
        flex: 1;
        margin: 0 20px
      }
  }
}
</style>
